<script setup>
import { ref } from 'vue'

const props = defineProps({
  detail: Object,
  accounts: {
    type: Array,
    default: () => []
  }
})
const dialogVisible = defineModel({ type: Boolean, default: false })
const emits = defineEmits(['submit'])

const ruleForm = ref({
  groupName: '',
  sort: 0,
  status: 1,
  groupDescribe: ''
})
const rules = {
  sort: [
    {
      required: true,
      message: '请输入排序',
      trigger: 'change'
    },
    {
      required: true,
      type: 'number',
      message: '请输入数字',
      trigger: 'change'
    }
  ],
  groupName: {
    required: true,
    message: '请输入分组名称',
    trigger: 'change'
  },
  status: {
    required: true,
    message: '请选择状态',
    trigger: 'change'
  }
}

const ruleFormRef = ref()
const handleSubmit = async () => {
  await ruleFormRef.value.validate()
  emits('submit', ruleForm.value)
}

const handleClose = done => done()

const handleOpen = () => {
  ruleFormRef.value.resetFields()

  if (props.detail) {
    Object.assign(ruleForm.value, props.detail)
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    width="768px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    v-bind="$attrs"
    @open="handleOpen"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="right"
      label-suffix="："
    >
      <el-form-item label="分组名称" prop="groupName">
        <el-input v-model.trim="ruleForm.groupName" clearable />
      </el-form-item>
      <el-form-item label="分组排序" prop="sort">
        <el-input v-model.number="ruleForm.sort" clearable />
      </el-form-item>
      <el-form-item label="分组状态" prop="status" required>
        <el-radio-group v-model="ruleForm.status">
          <el-radio :value="1">正常</el-radio>
          <el-radio :value="0">删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分组描述" prop="groupDescribe">
        <el-input
          v-model="ruleForm.groupDescribe"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
    </template>
  </el-dialog>
</template>
